<?php
echo $this->Html->css(['AcoManager.base' , 'AcoManager.font-awesome.min']);
echo $this->Html->script(['AcoManager.vue', 'AcoManager.axios.min']);
?>
<div class="container-fluid" id="app" >
    <div class="icons" v-show="!iconhidden">
        <div class="icon-pointer" @click="hideIcons(true)">X</div>
        <div class="icon-list">
            <ul>
                <li v-for="icon in icons" :class="{active: payload.icon==icon}" @click="selectedIcon(icon)"><i class="fa fa-2x" :class="'fa-'+ icon" ></i></li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="col col-green">
        <h3>
            Acos
            <button @click="fetchAcos">Fetch</button>
        </h3>
        <div v-for="item in acos">
            <h5> <a href="javascript:void(0)" class="fa" :class="'fa-' + item.icon" @click="toContain(item)">
                    {{ item.alias }}</a> [{{item.status.substr(0, 1)}}]
                <span @click="deleteAco(item)" class="fa fa-close"></span>
                <span @click="move(item, 'up')" class="fa fa-arrow-up icon-green"></span>
                <span @click="move(item, 'down')" class="fa fa-arrow-down icon-blue"></span>
            </h5>
            <ul>
                <li v-for="child in item.children">
                    <a href="javascript:void(0)" class="fa" :class="'fa-' + child.icon" @click="toContain(child)">
                        {{ child.alias }}</a> [{{child.status.substr(0, 1)}}]
                    <span @click="deleteAco(child)" class="fa fa-close"></span>
                    <span @click="move(child, 'up')" class="fa fa-arrow-up icon-green"></span>
                    <span @click="move(child, 'down')" class="fa fa-arrow-down icon-blue"></span>
                </li>
            </ul>
        </div>

    </div>
    <div class="col col-bule">
        <h3>Contain
            <button @click="saveData">Save</button>
        </h3>
        <div>
            <h5>Method：
                Add <input type="radio"  value="add" v-model="payload.method" @click="setId">
                Update <input type="radio"  value="update" v-model="payload.method">
            </h5>
            <input type="text" placeholder="权限名称" v-model.trim="payload.alias">
            <select v-model="payload.parent">
                <option value="0">- Top Parent -</option>
                <option v-for="item in acos" :value="item.id">{{ item.alias }}</option>
            </select>
            <h5>Icon：<i class="fa fa-2x" :class="'fa-' + payload.icon"></i> <a href="javascript:void(0)" @click="hideIcons(false)">Choose</a> </h5>
            <h5>Status：
                U <input type="radio"  value="unabled" v-model="payload.status">
                E <input type="radio"  value="enabled" v-model="payload.status">
                H <input type="radio"  value="hidden" v-model="payload.status">
            </h5>
            <input type="text" placeholder="Link" v-model.trim="payload.link">
            <h5>Actions(Click action to set Link):</h5>
        </div>
        <div>
            <ul v-for="(items, index) in payload.memo">
                <li v-for="item in items"><a href="javascript:void(0)" @click="setLink(index, item)">{{index}} / {{ item }}</a> <span @click="deleteAction(index, item)">X</span></li>
            </ul>
        </div>
    </div>
    <div class="col col-yellow">
        <h3>
            Actions
            <button @click="fetchAction">Fetch</button>
        </h3>
        <select v-model="controller">
            <option value="">Select Controller</option>
            <option v-for="(item, index) in actions">{{ index }}</option>
        </select>
        <div>
            <ul>
                <li v-for="(item,index) in actions[controller]"><a href="javascript:void(0)" @click="addAction(item)">{{ item }}</a></li>
            </ul>
        </div>
    </div>

    <div class="msg" :class="msg.status == 200 ? 'msg-success': 'msg-error'" v-show="msg.status">{{msg.content}}</div>
</div>
<script>
    axios.defaults.baseURL = '<?php echo preg_replace('#index.*#','', $this->Url->build(null,'fullBase')); ?>';
    var app = new Vue({
        el: '#app',
        data: {
            icons: [
            ],
            iconhidden: true,
            msg:{
                status: 0,
                content: ''
            },
            payload: {
                id: 0,
                parent: 0,
                alias: '',
                icon: '',
                memo: {},
                link: '',
                status: 'enabled',
                method: 'add'
            },
            actions:{
            },
            acos: [],
            controller: '',
        },
        mounted() {
            this.getIcons();
            this.fetchAction();
            this.fetchAcos();
        },
        methods: {
            setId() {
                this.payload.id = 0;
            },
            deleteAco(v) {
                if(confirm('Delete Aco('+ v.alias +') from Acos (include the Children if it has). Confirm ?')){
                    var vm = this;
                    axios({
                        method: 'get',
                        url: 'deleteacos/'+ v.id,
                    })
                        .then(function (response) {
                            vm.msg.status = 200;
                            vm.msg.content= response.data.msg;

                            if(v.parent_id === 0) {
                                let i = vm.acos.indexOf(v);
                                vm.$delete(vm.acos, i);
                            } else {
                                let i = vm.getParentIndex(v.parent_id);
                                let j = vm.getChildIndex(v.id, i);
                                vm.$delete(vm.acos[i].children, j);
                            }

                        })
                        .catch(function (error) {
                            vm.msg.status = 400;
                            vm.msg.content= 'Delete error!'
                            console.log(error);
                        });
                }
            },
            toContain(aco) {
                aco.memo = aco.memo || {};
                this.payload = {
                    method: 'update',
                    id: aco.id,
                    parent: aco.parent_id,
                    alias: aco.alias,
                    icon: aco.icon,
                    memo: aco.memo,
                    link: aco.link,
                    status: aco.status
                };
            },
            fetchAcos() {
                var vm = this;
                axios({
                    method: 'get',
                    url: 'fetchacos',
                })
                    .then(function (response) {
                        vm.acos = response.data.memo;
                        console.log(vm.acos);
                        vm.msg.status = 200;
                        vm.msg.content= 'Get Acos successed!'
                    })
                    .catch(function (error) {
                        vm.msg.status = 400;
                        vm.msg.content= 'Get Acos error!'
                        console.log(error);
                    });
            },
            saveData() {
                this.msg = {};
                if(this.payload.alias === '') {
                    this.msg = {
                        status: 400,
                        content: 'Alias is not to be Empty',
                    }
                }
                if(this.payload.icon === '') {
                    this.msg = {
                        status: 400,
                        content: 'Icon is not to be Empty',
                    }
                }

                if(this.payload.method === 'update') {
                    if(this.payload.id === 0) {
                        this.msg = {
                            status: 400,
                            content: 'Can not find update ID, Do it again',
                        }
                    }
                }

                if(this.msg.status === 400){
                    return false;
                }

                var vm = this;
                axios.post('save', this.payload)
                    .then(function (response) {
                        let data = response.data;
                        if(data.status === 200){
                            vm.msg = {
                                status: 200,
                                content: data.msg
                            };
                            data.memo.memo =JSON.parse(data.memo.memo) || {};
                            if (vm.payload.method === 'add') {
                                if (data.memo.parent_id === 0) {
                                    vm.acos.push(data.memo);
                                } else {
                                    let i = vm.getParentIndex(data.memo.parent_id);
                                    vm.acos[i].children.push(data.memo);
                                }

                            } else {
                                if (data.memo.parent_id === 0) {
                                    let i = vm.getParentIndex(data.memo.id);
                                    data.memo['children'] = vm.acos[i].children;
                                    vm.$set(vm.acos, i, data.memo);
                                } else {
                                    let i = vm.getParentIndex(data.memo.parent_id);
                                    let j = vm.getChildIndex(data.memo.id, i);
                                    vm.$set(vm.acos[i]['children'], j, data.memo);
                                }
                            }
                        } else {
                            vm.msg = {
                                status: 400,
                                content: data.msg
                            }
                        }
                    })
                    .catch(function (error) {
                        vm.msg = {
                            status: 400,
                            content: 'Something looks wrong'
                        };

                    });

            },
            setLink(c, a){
                this.payload.link=c + '/' + a;
            },
            addAction(v) {

                if(!(this.payload.memo.hasOwnProperty(this.controller))){
                    this.$set(this.payload.memo, this.controller, []);
                }
                if(this.payload.memo[this.controller].indexOf(v) < 0) {
                    this.$set(this.payload.memo[this.controller], this.payload.memo[this.controller].length, v);
                }
                console.log(this.payload.memo);
            },
            fetchAction() {
                var vm = this;
                axios({
                    method: 'get',
                    url: 'fetchaction',
                })
                    .then(function (response) {
                        vm.actions = response.data;
                        vm.msg.status = 200;
                        vm.msg.content= 'Get actions successed!'
                    })
                    .catch(function (error) {
                        vm.msg.status = 400;
                        vm.msg.content= 'Get actions error!'
                        console.log(error);
                    });
            },
            deleteAction(c, a){
                let i = this.payload.memo[c].indexOf(a);
                this.payload.memo[c].splice(i, 1);
                if (this.payload.memo[c].length === 0){
                    this.$delete(this.payload.memo, c);
                }

            },
            selectedIcon(icon) {
                this.payload.icon = icon;
            },
            hideIcons(status) {
                this.iconhidden = status;
            },
            getIcons() {
                var vm = this;
                axios({
                    method: 'get',
                    url: 'icons',
                })
                .then(function (response) {
                    vm.icons = response.data;
                    //console.log(vm.icons);
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            move(v, act) {
                var vm = this;
                axios({
                    method: 'get',
                    url: 'move/' + v.id + '/'+act,
                })
                .then(function (response) {
                    if (response.data.status === 200) {
                        if(v.parent_id === 0) {
                            let i = vm.getParentIndex(v.id);
                            i = parseInt(i);
                            if (act === 'up') {
                                if (i === 0) {
                                    return true;
                                }
                                let tmp = vm.acos[i-1];
                                vm.$set(vm.acos, i , tmp);
                                vm.$set(vm.acos, i-1 , v);
                            }

                            if (act === 'down') {
                                let l = vm.acos.length -1;
                                if (i === l) {
                                    return true;
                                }
                                let tmp = vm.acos[i+1];
                                vm.$set(vm.acos, i , tmp);
                                vm.$set(vm.acos, i+1 , v);
                            }
                        } else {
                            let i = vm.getParentIndex(v.parent_id);
                            let j = vm.getChildIndex(v.id, i);
                            i = parseInt(i);
                            j = parseInt(j);
                            if (act === 'up') {
                                if (j === 0) {
                                    return true;
                                }
                                let tmp = vm.acos[i].children[j-1];
                                vm.$set(vm.acos[i].children, j , tmp);
                                vm.$set(vm.acos[i].children, j-1 , v);
                            }

                            if (act === 'down') {
                                let l = vm.acos[v.parent_id].children.length -1;
                                if (j === l) {
                                    return true;
                                }
                                let tmp = vm.acos[i].children[j+1];
                                vm.$set(vm.acos[i].children, j , tmp);
                                vm.$set(vm.acos[i].children, j+1 , v);
                            }

                        }
                    }
                    //console.log(vm.icons);
                })
                .catch(function (error) {
                    console.log(error);
                });

            },
            getParentIndex(id) {
                for(let i in this.acos) {
                    if(this.acos[i].id === id) {
                        return i;
                    }
                }
            },
            getChildIndex(id, pIndex) {
                for(let j in this.acos[pIndex].children) {
                    if(this.acos[pIndex].children[j].id === id) {
                        return j;
                    }
                }
            }
        }
    })
</script>